<template>
  <div class="merchant-details">
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="角色列表" size="65%" class="box-drawer"
      :with-header="false" :visible.sync="drawerLoading" :show-close="true" @close="cloneDrawer">
      <!-- 头部-->
      <div style="position: relative">
        <div class="drawerTitle">
          <span>角色列表</span>
          <div class="close" @click="cloneDrawer">
            <i class="el-icon-close" style="font-size: 24px;" />
          </div>
        </div>
      </div>
      <div class="container-module">
        <el-form :inline="true" class="search-form" size="small">
          <el-row style="display: flex">
            <div style="flex:1;">
              <span style="line-height: 43px;margin-right: 20px;">查询</span>
              <el-form-item class="search-form-item" label="角色名称" style="margin: 5px 0">
                <el-input clearable placeholder="请输入角色名称" v-model="searchForm.params.name" class="input-with-select">
                </el-input>
              </el-form-item>
            </div>
            <div style="padding: 5px 0">
              <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="querysearch">查询</el-button>
                <el-button size="small" type="primary" icon="el-icon-refresh" @click="resetting">重置</el-button>
              </el-form-item>
            </div>
          </el-row>
        </el-form>
      </div>
      <div style="padding: 0 30px">
        <el-row :gutter="20">
          <el-col class="new_table_card">
            <el-table v-loading="loading" highlight-current-row :data="inventorylist" :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }" style="width: 100%" height="100%">
              <el-table-column
                align="center"
                width="200"
                prop="id"
                label="角色ID"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="name"
                label="角色名称"
              >
              </el-table-column>
              <el-table-column fixed="right" prop="address" label="操作" align="center" width="180px">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="edit_grouping(scope.row)">
                    编辑
                  </el-button>
                  <el-button type="text" size="small" @click="delete_group(scope.row)">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table></el-col>
          <el-col>
            <pagination v-show="total > 0" :total="total" :page.sync="searchForm.page" :limit.sync="searchForm.count"
              @pagination="getinventorylist" />
          </el-col>
        </el-row>
      </div>
    </el-drawer>
    <!-- 编辑分组 -->
    <el-dialog
      title="编辑角色"
      :visible.sync="dialogClass"
      width="600px"
      :before-close="CloseDialogLabel"
    >
      <el-row :gutter="20">
        <el-form
          :model="ruleFormClass"
          status-icon
          label-width="100px"
          class="demo-ruleForm"
          :rules="rulesClass" ref="rulesClass"
        >
          <el-col :span="22">
          </el-col>
          <el-col :span="22">
            <el-form-item label="角色名称" prop="category_name">
              <el-input clearable placeholder="请输入角色名称" v-model="ruleFormClass.name" class="input-with-select">
              </el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="CloseDialogLabel">取 消</el-button>
        <el-button type="primary" :loading="butsloading" @click="submitFormClass('rulesClass')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {
    rolelist,
    addtagCategory,
    roledelete
  } from '@/api/manager/index'
  export default {
    name: 'rolelists',
    components: {},
    data() {
      return {
        butsloading:false,//按钮loading
        dialogClass:false,//修改分组
        level:'',
        searchDisplay: false, //搜索弹起隐藏
        loading: false,
        ruleFormClass:{
          name:'',
        },//编辑分组
        searchForm: {
          page: 1,
          count: 10,
          params:{
            name:''
          }
        },//搜索分组
        total: 0,
        drawerLoading: false,
        inventorylist: [],
        rulesClass: {
          name: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("角色名称不能为空"));
              }
              callback();
            },
            trigger: "blur",
          }, ],
        },
      }
    },
    methods: {
      //编辑
      submitFormClass(formName){
          var _this = this;
          _this.$refs[formName].validate((valid) => {
            if (valid) {
              _this.butsloading = true
              addtagCategory(_this.ruleFormClass).then((res) => {
                if (res.code !== 200) {
                  _this.$messages.error(res.msg);
                  _this.butsloading = false
                  return;
                }
                _this.$messages.success("操作成功");
                _this.dialogClass = false;
                _this.butsloading = false
                _this.resetting()
              });
            } else {
              return false;
            }
          });
      },
      //关闭编辑分组弹窗
      CloseDialogLabel() {
        this.ruleFormClass.name = '';
        this.dialogClass = false;
      },
      //编辑分组
      edit_grouping(row) {
        this.ruleFormClass = JSON.parse(JSON.stringify(row))
        this.dialogClass = true;
      },
      //删除分组
      delete_group(row) {
        this.$confirm('您确定要删除该分组吗? ', '删除操作', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          roledelete({
            id: row.id
          }).then((res) => {
            if (res.code !== 200 || res.status !== 1) {
              this.$messages.error(res.msg);
              return;
            }
            this.$messages.success(res.msg);
            this.resetting()
          });
        }).catch(() => {});
      },
      //搜索
      querysearch(){
        this.searchForm.page = 1
        this.loading = true
        rolelist(this.searchForm).then((res) => {
          this.loading = false
          this.inventorylist = res.data.list
          this.total = res.data.total
        })
      },
      //列表
      getinventorylist() {
        this.loading = true
        rolelist(this.searchForm).then((res) => {
          this.loading = false
          this.inventorylist = res.data.list
          this.total = res.data.total
        })
      },
      //重置
      resetting() {
        this.searchForm.page = 1
        this.searchForm.count = 10
        this.searchForm.params.name = ''
        this.getinventorylist();
      },
      //刷新
      refresh() {
        this.searchForm.page = 1
        this.searchForm.count = 10
        this.getinventorylist();
      },
      //接收父组件传的值
      open() {
        this.drawerLoading = true
        this.loading = true
        rolelist(this.searchForm).then((res) => {
          this.loading = false
          this.inventorylist = res.data.list
          this.total = res.data.total
        })
      },
      //关闭详情抽屉
      cloneDrawer() {
        this.drawerLoading = false
      },
    }
  }
</script>
<style scoped>
  .el-divider--horizontal {
    margin: 2px 0 8px;
  }
</style>
<style lang="scss">
  .container-module {
    padding: 20px 20px 10px 30px;
  }
  .infoDiv {
    margin: 0 auto 16px;
    display: flex;
    border: 1px solid #c6c6c6;
    border-radius: 6px;
    padding: 10px;
    .img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background-color: #fff;

    }
    .right {}
    .scenter {
      flex: 1;
      margin-left: 10px;

      h3 {
        line-height: 30px;
        font-weight: 400;
        font-size: 16px;
        padding: 0px 0;
        margin: 0;
      }
    }
  }
  .orderdetail_item {
    display: flex;
    justify-content: start;
    margin-right: 30px;
    p:nth-child(2) {
      color: #000;
      font-weight: 550;
      margin-left: 15px;
    }
  }
  .order_center {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    padding: 0 2px 0 0;
    font-size: 13px;
    color: #666;
  }
</style>
